<template>
  <section class="component resource-control">
    <data-box :data="dataSet" :maxHeight="500" :selectionList="selectionList" @update:selectionList="onSelectionListChange">
      <template slot="columns">
        <el-table-column prop="name" label="功能名称" :min-width="$helper.getColumnWidth(4)" align="center">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import DataBox from "~/components/common/data-box.vue";
import { Dependencies } from "~/core/decorator";
import { CommonService } from "~/utils/common.service";
import { Emit, Watch, Model, Prop } from "vue-property-decorator";
import { namespace } from "vuex-class"
const systemModule = namespace('system-manage')

@Component({
  components: {
    DataBox
  }
})
export default class ResourceControl extends Vue {
  @systemModule.Getter private systemControls:any[];

  @Prop()
  private currentTreeId: string;

  @Model('selected-change', {
    type: Array,
    default: () => []
  })
  private selectedControlIds: string[]

  @Emit('selected-change')
  private emitSelectedChange(val) { }


  @Emit('check-tree-node')
  private emitCheckTreeNode() { }


  private get dataSet(){
    return this.systemControls.filter(x => x.parent === this.currentTreeId)
  }

  private get selectionList(){
    return this.dataSet.filter(x => this.selectedControlIds.includes(x.id))
  }

  private onSelectionListChange(val) {
    if (val.length) this.emitCheckTreeNode()
    const keySet = new Set(this.dataSet.map(x => x.id).concat(this.selectedControlIds))
    this.dataSet.forEach(item =>{
      if(val.findIndex(x => x.id === item.id) < 0) keySet.delete(item.id)
    })
    this.emitSelectedChange(Array.from(keySet))
  }
}
</script>

<style lang="less">
.component.resource-control{
  .data-box{
    padding:0;
    .table{
      padding:0;
    }
  }
}
</style>
